import React, {useState,useEffect,useRef}from 'react'
import Child from './components/Child'

// useRef: 
// 特点: ref 对象在组件的运行过程中始终指向同一个地址
// 1. 获取dom
// 2. 存和组件渲染无关的数据，ref对象.current 改变时组件不会更新
// 3. 获取子组件中的数据和方法（需要配合 forwardRef, useImperativeHandle）
//    3.1 在父组件定义ref变量传给子组件
//    3.2 在子组件使用 forwardRef 把父组件传过来的 ref 对象传给子组件的第二个参数
//    3.3 通过 useImperativeHandle 给父组件的ref对象添加数据和方法


const App = () => {
  const [title,setTitle] = useState('我是标题')
  const childRef = useRef()

  const add = () => {
    childRef.current.add(10)
  }
  return (
    <div>
      <h1>{title}</h1>
      <input type="text" value={title} onChange={e => setTitle(e.target.value)}/>
      <button onClick={add}>修改子元素的num</button>
      <Child ref={childRef} />
    </div>

  )
}

export default App